<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0px;
			}
			.div1{
				position: absolute;
				width: 200px;
				height: 200px;
				top: 20px;
				left: 10px;
				background-color: blue;
			}
			.div2{
				position: absolute;
				width: 100px;
				height: 100px;
				top: 50px;
				background-color: red;
			}
			.div3{
				position: absolute;
				top: 250px;
			}
		</style>
	</head>
	<body style="height: 2000px;">
		<div class="div1">
			<div class="div2">测试offset</div>
		</div>
		<div class="div3">
			<button id="btn1">读取offset和position</button>
			<button id="btn2">设置offset</button>
		</div>
		
		<!-- 获取/设置标签的位置数据
			offset():相对于页面左上角的坐标
			position():相对于父元素左上角的位置 -->
		<script type="text/javascript" src="../js/jquery-3.6.0.js"></script>
		<script type="text/javascript">
			// 需求:
			// 1.点击 btn1
			//   打印 div1 相对于页面左上角的位置
			//   打印 div2 相对于页面左上角的位置
			//   打印 div1 相对于父元素左上角的位置
			//   打印 div2 相对于父元素左上角的位置
			// 2.点击 btn2
			//   设置 div2 相对于页面的左上角的位置
			
			$('#btn1').click(function(){
				//   打印 div1 相对于页面左上角的位置
				var offset = $('.div1').offset()
				console.log(offset.left,offset.top)
				
				//   打印 div2 相对于页面左上角的位置
				offset = $('.div2').offset()
				console.log(offset.left,offset.top)
				
				//   打印 div1 相对于父元素左上角的位置
				var position = $('.div1').position()
				console.log(position.left,position.top)
				
				//   打印 div2 相对于父元素左上角的位置
				var position = $('.div2').position()
				console.log(position.left,position.top)
			})
			
			$('#btn2').click(function(){
				$('.div2').offset({
					left: 50,
					top: 100
				})
			})
		</script>
	</body>
</html>
